<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .ibox-content{
            max-width: 750px;
            min-width: 750px;
            max-height: 350px;
            min-height: 350px;
        }
        .ibox-title{
            max-width: 750px;
            min-width: 750px;
        }

        #clock{
            margin: auto;
            border: 10px double #070707;
            width: 400px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            font-size: larger;
            color: #3e657c;
            position: relative;
            top: 80px;
            left: 358px;
        }

        #sign-in{
            font-size: xx-large;
            position: relative;
            top: -180px;
            left: 675px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="row border-bottom white-bg dashboard-header">
        <div class="col-sm-12">
            <blockquote class="text-warning" style="font-size:14px">
				    <h2 class="text-danger">欢迎来到企业人力资源管理系统！</h2>

            </blockquote>
            <hr>
        </div>
    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>位置信息</h5>
                    </div>
                    <div class="ibox-content no-padding" id="container"></div>
                </div>
            </div>

            <div class="col-sm-4">
                <div id="clock"></div>
            </div>
        </div>
<!--            <div class="col-sm-4">-->
<!--                <div class="ibox float-e-margins">-->
<!--                    <div class="ibox-title">-->
<!--                        <h5>历史公告</h5>-->
<!--                    </div>-->
<!--                    <div class="ibox-content no-padding">-->
<!--                        <div class="panel-body">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        <div class="row">
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input id="sign-in" type="button" class="btn btn-primary" value="打卡" />
<!--                    <input id="usereId" name="userId" th:field="${user.userId}" type="text">-->
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script type="text/javascript">
        var lng;
        var lat;
        var prefix = "user"
	    $('#pay-qrcode').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', '360px'],
	            content: html
	        });
	    });

        $("#sign-in").click(function (){
            if(lng < 108.94396&& lng > 108.89666 && lat < 34.41803 && lat> 34.36940){//在范围内
                // alert("您在打卡范围内！")
                $.ajax({
                    url: prefix + "/sign",
                    type: "post",
                    data: "",
                    dataType: "json",
                    success: function (data){
                        // var time = new Date();
                        // var hour = time.getHours();
                        // if(hour > 9){
                        //     $.modal.alertWarning("您已迟到，已记您迟到一次，下次请准时！");
                        // }
                        // else if (hour > 14){
                        //     $.modal.alertWarning("您已缺勤，已记您缺勤一次，下次请注意！");
                        // }
                        alert(data.msg)
                    },
                    error: function (errorMsg){
                        alert("请求失败！");
                    }
                });
            }
            else {
                alert("您不在打卡范围内，请重试！")
            }
        })

        function showTime(clock){
            var now = new Date();
            var year = now.getFullYear();
            var month= now.getMonth();
            var day = now.getDate();
            var hour = now.getHours();
            var minu = now.getMinutes();
            var second = now.getSeconds();
            month = month+1;
            var arr_work = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
            var week = arr_work[ now.getDay()];
            var time = year+"年"+month+"月"+day+"日 "+ week+" "+hour+":"+minu+":"+second;
            clock.innerHTML="当前时间: "+time;
        }
        // window.onload = function() {
        //     var clock = document.getElementById("clock");
        //     window.setInterval("showTime(clock)", 1000);
        // }

        function loadJScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = '//api.map.baidu.com/api?type=webgl&v=1.0&ak=AKB76byFH2Cezcc1ZXOfsQu96mwmA2GD&callback=init';
            document.body.appendChild(script);
        }
        function init() {
            var map = new BMapGL.Map('container'); // 创建Map实例
            var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
            map.centerAndZoom(point, 10);
            map.enableScrollWheelZoom(); // 启用滚轮放大缩小
            var geolocation = new BMapGL.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMapGL.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    lng = r.point.lng;
                    lat = r.point.lat;
                    alert('您的位置：' + lng + ',' + lat);
                }
                else {
                    alert('failed' + this.getStatus());
                }
            });
        }
        // window.onload = loadJScript; // 异步加载地图
        window.onload = function (){
            var clock = document.getElementById("clock");
            window.setInterval("showTime(clock)", 1000);
            loadJScript();// 异步加载地图
        }


    </script>
</body>
</html>
